<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">

      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">

        <chart-card :loading="loading" title="今日订单量" :total="totalOrder" :contentHeight="246">
          <!--          <a-tooltip title="指标说明" slot="action">-->
          <!--            <a-icon type="info-circle-o"/>-->
          <!--          </a-tooltip>-->
          <div>
            <!--            <mini-area/>-->

            <line-chart-multid :fields="['num']" :dataSource="orderData" padding="0" hidden-point
                               :aliases="[{field:'num',alias:'订单数量'}]"></line-chart-multid>
          </div>
          <!--          <template slot="footer">日订单量<span> {{ '1234' | NumberFormat }}</span></template>-->
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="今日新增待审核回收员" :total="totalRecycler" :contentHeight="246">
          <!--          <a-tooltip title="指标说明" slot="action">-->
          <!--            <a-icon type="info-circle-o"/>-->
          <!--          </a-tooltip>-->
          <div>
            <line-chart-multid :data-source="recyclerData" padding="0" hidden-point :fields="visitFields"
                               :aliases="[{field:'num',alias:'今日新增待审核回收员'}]"/>
          </div>
          <!--          <template slot="footer">转化率 <span>60%</span></template>-->
        </chart-card>
      </a-col>

    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}" :active-key="activeKey"
                @change="handleTabChange">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a @click="handleDateType(1)" :class="dataType === 1?'active':''">今日</a>
              <a @click="handleDateType(2)" :class="dataType === 2?'active':''">本周</a>
              <a @click="handleDateType(3)" :class="dataType === 3?'active':''">本月</a>
              <a @click="handleDateType(4)" :class="dataType === 4?'active':''">本年</a>
            </div>
            <!--            <a-range-picker :style="{width: '256px'}"/>-->
          </div>
          <a-tab-pane loading="true" tab="品类回收重量统计" key="2">
            <a-row>
              <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                <!--                <bar title="回收重量排行" :dataSource="barData"/>-->
                <line-chart-multid :fields="alias.map(({field})=>field)" :dataSource="bottomData" :aliases="alias"></line-chart-multid>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="待审核回收员增数量" key="1">
            <a-row>
              <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                <!--                <bar title="回收员趋势" :dataSource="barData"/>-->
                <line-chart-multid :fields="visitFields" :dataSource="bottomData"
                                   :aliases="[{field:'num',alias:'回收员数量'}]"></line-chart-multid>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'
import {getLoginfo, getVisitInfo} from '@/api/api'
import {getAction, postAction} from "@api/manage";

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100
  })
}
const barData = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
}
export default {
  name: "IndexRecover",
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo
  },
  data() {
    return {
      dataType: 4,
      activeKey: '2',
      loading: true,
      center: null,
      totalOrder: '0',
      totalRecycler: '0',
      totalBottom: '0',
      recyclerData: [],
      orderData: [],
      bottomData: [],
      alias: [],
      rankList,
      barData,
      loginfo: {},
      visitFields: ['num'],
      visitInfo: [],
      indicator: <a-icon type="loading" style="font-size: 24px" spin/>
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initLogInfo();
    this.initRecycler()
    this.initOrder()
    this.getIndexReport()
  },
  methods: {
    initRecycler() {
      postAction('/home/recycler/getManagerList', {}).then(res => {
        this.recyclerData = res.result.map(i => ({...i,type: i.date.substr(5)}))
        this.totalRecycler = this.recyclerData[0].nowNum
      })
    },
    initOrder() {
      postAction('/home/recycler/getOrderList', {}).then(res => {
        this.orderData = res.result.map(i => Object.assign({}, i, {type: i.date.substr(5)}))
        this.totalOrder = this.orderData[0].nowNum
      })
    },
    getIndexReport() {
      postAction('/home/recycler/getIndexReport', {
        "dateType": this.dataType,
        "type": this.activeKey
      }).then(res => {
        getAction('/cnDictionaryController/getDictByCode', {dictCode: 'product_type'}).then(({result}) => {
          this.bottomData = res.result.map(i => Object.assign({}, i, {type: i.date||i.data,date:i.date||i.data}))
          const alias = []
          Object.keys(this.bottomData[0]).map(key => {
            console.log(key)
            let json
            const t = result.find(i => i.dictDataCode === key)
            if (t) {
              json = {field: key, alias: t.dictDataDesc}
              alias.push(json)
            }
          })
          this.alias = alias
        })
      })
    },
    handleDateType(dataType) {
      this.dataType = dataType
      this.getIndexReport()
    },
    handleTabChange(activeKey) {
      this.activeKey = activeKey
      this.getIndexReport()
    },
    initLogInfo() {
      const result = {"totalVisitCount": 900734, "todayVisitCount": 627, "todayIp": 395}
      Object.keys(result).forEach(key => {
        result[key] = result[key] + ""
      })
      this.loginfo = result;

      const visitInfo = [{"tian": "2020-11-23", "ip": 1461, "visit": 2882, "type": "11-23"}, {
        "tian": "2020-11-24",
        "ip": 1469,
        "visit": 2989,
        "type": "11-24"
      }, {"tian": "2020-11-25", "ip": 1514, "visit": 3091, "type": "11-25"}, {
        "tian": "2020-11-26",
        "ip": 1508,
        "visit": 3090,
        "type": "11-26"
      }, {"tian": "2020-11-27", "ip": 1393, "visit": 2845, "type": "11-27"}, {
        "tian": "2020-11-28",
        "ip": 593,
        "visit": 1098,
        "type": "11-28"
      }, {"tian": "2020-11-29", "ip": 395, "visit": 627, "type": "11-29"}]
      this.visitInfo = visitInfo
    },
  }
}
</script>

<style lang="less" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
      color: rgba(0, 0, 0, 0.65);

      &.active {
        color: #1890ff;
      }
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    font-size: .95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }

  p {
    line-height: 42px;
    margin: 0;

    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>
